<template>
  <div class="gs-header">
    <mt-search v-model="value" cancel-text="取消" placeholder="搜索"></mt-search>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">
       <router-link to="/Concern">关注</router-link>
      </mt-tab-item>
      <mt-tab-item id="2">
        <router-link to="/Recommend">推荐</router-link>
      </mt-tab-item>
      <mt-tab-item id="3">
        <router-link to="/HotList">热榜</router-link>
      </mt-tab-item>
    </mt-navbar>
  </div>
</template>

<script>
  export default {
    name: "HeaderPage",
    data() {
      return {
        selected: "2",
        value: "",
        routePath:this.$route.path
      };
    },
    methods: {
      curSelectValue(){
        let vm = this
        if(vm.routePath=='/Concern'){
          vm.selected="1"
        }else if(vm.routePath=='/Recommend'){
          vm.selected="2"
        }else if(vm.routePath=='/HotList'){
          vm.selected="3"
        }
      }
    },
    computed: {},
    // watch: {
    //   selected(val, oldVal) {
    //     let vm = this
    //     console.log(val)
    //     switch (val) {
    //       case "1":
    //         vm.$router.push("/Concern");
    //         break;
    //       case "2":
    //         vm.$router.push("/Recommend");
    //         break;
    //       case "3":
    //         vm.$router.push("/HotList");
    //         break;
    //     }
    //   }
    // },
    created() {
      const vm = this;
      vm.curSelectValue();
    },
    mounted(){
      let vm = this;

    }
  };
</script>

<style>
</style>
